import { once, on } from 'element-ui/src/utils/dom';

export default {
  // 只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性初始化设置
  bind(el, binding, vnode) {
    let interval = null;
    let startTime;
    // 拿到组件内的 decrease 或 increase 方法
    const handler = () => vnode.context[binding.expression].apply();
    const clear = () => {
      // 按下和抬起时间相隔 0.1s 内则执行一次操作
      if (Date.now() - startTime < 100) {
        handler();
      }
      clearInterval(interval);
      interval = null;
    };
    // addEventListener 和 detachEvent 的兼容写法
    on(el, 'mousedown', (e) => {
      // 鼠标按下时不是左键 0，直接 return
      if (e.button !== 0) return;
      // 鼠标按下左键
      startTime = Date.now();
      // 注册一次性事件 ，鼠标抬起时执行 clear
      // 这里是给 document 绑定一次性事件，防止长按操作时，鼠标移出按钮外
      // 从而 clear 事件无法正确响应，导致数字一直在增加
      once(document, 'mouseup', clear);
      clearInterval(interval);
      // 设置定时器执行长按操作，每隔 0.1s 触发
      interval = setInterval(handler, 100);
    });
  }
};
